<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增案件信息')" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-info-add" th:object="${vo}">
            <input id="caseId" name="caseId" type="hidden" th:field="*{caseId}"/>
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">案件名称：</label>
                <div class="col-sm-8">
                    <input name="caseName" class="form-control" type="text" th:field="*{caseName}" required>
                </div>
            </div>
 
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">委托方: </label>
                <div class="col-sm-8">
                    <table class="table table-sm" id="bootstrap-table-principal" data-show-header="false">
                    <input id="principal_cur_idx2" type="hidden" value=""/>
                    <caption>
	                    <button type="button" class="btn btn-white btn-sm" onclick="addRow()"><i class="fa fa-plus"> 增加</i></button>
                    </caption>
                    </table>
                </div>
            </div>
            
            <div class="form-group">    
                <label class="col-sm-3 control-label">利益相对方：</label>
                <div class="col-sm-8">
                    <input name="caseName" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">第三方：</label>
                <div class="col-sm-8">
                    <input name="caseName" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">案件类型：</label>
                    <div id="element_ct" class="row">
                        <div class="col-sm-2">
                            <select class="type form-control m-b" th:field="*{caseTypeId}" data-first-title="请选择">
			                  <option value="">请选择</option>
			                  <option th:value="*{caseTypeId}" th:selected="1"></option>
			                </select>
		                </div>
                        <div class="col-sm-2">
						&nbsp;&nbsp;&nbsp;&nbsp;诉讼类型：
		                </div>
		                <div class="col-sm-2">
			                <select class="router form-control m-b" th:field="*{litigateTypeId}" data-first-title="请选择">
			                  <option value="">请选择</option>
			                  <option th:value="*{litigateTypeId}" th:selected="1"></option>
			                </select>
		                </div>
						
                	</div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">备注：</label>
                <div class="col-sm-8">
                    <input name="remark" class="form-control" type="text" th:field="*{remark}">
                </div>
            </div>
        </form>
    </div>
    <div class="row">
        <div class="col-sm-offset-5 col-sm-10">
            <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>&nbsp;
            <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: jquery-cxselect-js" />
    
    <script th:inline="javascript">
    $(function() {
    	// 初始化数据, 可以由后台传过来
/*     	var data = [
    	{
    		id: "300",
    		name: "商品名称2-1",
    	},
    	{
    		id: "301",
    		name: "商品名称2-2",
    	}];
 */    
 
		var data = [[${vo.principal}]];
    	var options = {
		    id: "bootstrap-table-principal",
	    	data: data,
            pagination: false,
	        showSearch: false,
            showRefresh: false,
            showToggle: false,
            showToolbar: false,
            showColumns: false,
            /* showHeader:false, */
            sidePagination: "client",
	        columns: [
	 	        {
		        	field: 'index',
		        	align: 'center',
	                formatter: function (value, row, index) {
	                	var columnIndex = $.common.sprintf("<input type='hidden' name='index' value='%s'>", $.table.serialNumber(index));
	                	var caseCustIndex = $.common.sprintf("<input type='hidden' name='principal[%s].caseCustIndex' value='%s'>", index, index);
	                	var caseCustType = $.common.sprintf("<input type='hidden' name='principal[%s].caseCustType' value='%s'>", index, 1);
	                	var custId = $.common.sprintf("<input type='hidden' name='principal[%s].custId' id='principal[%s].custId' value='%s'>", index, index, row.custId);
	                	var custName = $.common.sprintf("<input type='hidden' name='principal[%s].custName' id='principal[%s].custName' value='%s'>", index, index, row.custName);
	                	var certNo = $.common.sprintf("<input type='hidden' name='principal[%s].certNo' id='principal[%s].certNo' value='%s'>", index, index, row.certNo);
	                	var custType = $.common.sprintf("<input type='hidden' name='principal[%s].custType' id='principal[%s].custType' value='%s'>", index, index, row.custType);
		            	return columnIndex + $.table.serialNumber(index) + caseCustIndex + caseCustType + custId + custName + certNo + custType;
	                }
	            },
/* 	        {
	            field: 'custName',
	            align: 'center',
	            formatter: function(value, row, index) {
	            	var textCustSelect = $.common.sprintf("<input type='text' name='custSelect' readonly value='%s-%s-%s'>", row.custId, row.custName, row.certNo);
	            	var btnCustSelect = '<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="addRow()"><i class="fa fa-search"></i>客户</a> ';
	        		return textCustSelect + btnCustSelect;
                }
	        },
 */	        {
                align: 'center',
                formatter: function(value, row, index) {
                	var value = $.common.isNotEmpty(row.index) ? row.index : $.table.serialNumber(index);
                    var actions = [];
                    actions.push('<div class="form-group">');
                    /* actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="addRow()"><i class="fa fa-plus"></i>增加</a> '); */
                    /* actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="addRow()"><i class="fa fa-search"></i>客户</a> '); */
	            	var textCustSelect = null;
                    if (row.custId == '') {
                    	textCustSelect = $.common.sprintf("<input type='text' name='custSelect' id='custSelect_%s' class='form-control' readonly='true' value=''>", 
                    			index);
                    } else {
                    	textCustSelect = $.common.sprintf("<input type='text' name='custSelect' id='custSelect_%s' class='form-control' readonly='true' value='%s-%s-%s'>", 
                    			index, row.custId, row.custName, row.certNo);
                    }
	            	actions.push(textCustSelect);
	            	actions.push(' ');
	            	/* var btnCustSelect = '<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="principal_cur_idx2()"><i class="fa fa-search"></i>客户</a> '; */
	            	var btnCustSelect = 
	            		$.common.sprintf(
	            		"<a class='btn btn-success btn-xs' href='javascript:void(0)' onclick='selectUserInfo2(%s)'><i class='fa fa-search'></i>客户</a> ", index);
	            	actions.push(btnCustSelect);
	            	actions.push(' ');
                    actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="sub.delRowByIndex(\'' + value + '\')"><i class="fa fa-remove"></i>删除</a>');
	            	
                    actions.push('</div>');
                    return actions.join('');
                }
            }]
	    };
	    $.table.init(options);
	});

    </script>
    
    <script th:inline="javascript">
        function addRow() {
        	var count = $("#" + table.options.id).bootstrapTable('getData').length;
        	var row = {
                index: $.table.serialNumber(count),
            	custId: "",
            	custName: "",
            	certNo: "",
            	custType: "",
            }
        	sub.addRow(row);
        }
    </script>
    
    <script th:inline="javascript">
        var prefix = ctx + "biz/caseinfo"
        $("#form-info-add").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                var data = $("#form-info-add").serializeArray();
                $.operate.saveTab(prefix + "/add", data);
            }
        }
        
        /* 用户管理-新增-选择部门树 */
        function selectDeptTree() {
        	var treeId = $("#treeId").val();
        	var deptId = $.common.isEmpty(treeId) ? "100" : $("#treeId").val();
        	var url = ctx + "system/user/selectDeptTree/" + deptId;
			var options = {
				title: '选择部门',
				width: "380",
				url: url,
				callBack: doSubmit
			};
			$.modal.openOptions(options);
		}
		
		function doSubmit(index, layero){
			var body = $.modal.getChildFrame(index);
   			$("#treeId").val(body.find('#treeId').val());
   			$("#treeName").val(body.find('#treeName').val());
   			$.modal.close(index);
		}
        
        /* 用户管理-新增-选择部门树 */
        function selectUserInfo(idx) {
        	$("#principal_cur_idx").val("mytext");
        	$("#principal_cur_idx").val(idx);
        	var url = ctx + "crm/custinfo/choice";
			var options = {
				title: '选择客户',
				width: "680",
				url: url,
				callBack: doSubmitUserInfo
			};
			$.modal.openOptions(options);
		}
        
        /* 用户管理-新增-选择部门树 */
        function selectUserInfo2(idx) {
        	$("#principal_cur_idx2").val("mytext");
        	$("#principal_cur_idx2").val(idx);
        	var url = ctx + "crm/custinfo/choice";
			var options = {
				title: '选择客户',
				width: "680",
				url: url,
				callBack: doSubmitUserInfo2
			};
			$.modal.openOptions(options);
		}
        
        /* 用户管理-新增-选择部门树 */
        function deleteLsPrincipalId(idx) {
        	var lsPrincipalId_n = "div_principal_" + idx;
        	var x = document.getElementById(lsPrincipalId_n);
        	//如果对象x不为空
        	if (x != null) {
        	    x.remove();
        	}
        	deleteLsPrincipalIdAfter();
        	/*
        	var nods = $(lsPrincipalId_n);
        	if(nods.length > 0) {
        	  $(lsPrincipalId_n)[0].removeChild(nods[0]);//选取id为list的元素，删除
        	} */
        	/* "|lsPrincipalId_${stat.index}|" */
		}
        
        function deleteLsPrincipalIdAfter() {
        	var nods = document.getElementsByName('div_principal');
        	for (let index=0; index < nods.length; index++) {
        		  let elem = nods[index];
        		  elem.id = 'div_principal_' + ((index+1) *10);
        		  var oDiv = elem.getElementsByName("div_principal_index")[0];
        		  if (oDiv != null) {
            		  oDiv.innerText = ((index+1) *10);
        		  }
        	}
        }
        
        function deleteLsPrincipalIdAfter4() {
        	var nods = document.getElementsByName('div_principal');
        	for (let index=0; index < nods.length; index++) {
        		  let elem = nods[index];
        		  elem.id = 'div_principal_' + ((index+1) *10);
        		  let children = elem.children;
        		  for (let j=0; j < nods.length; j++) {
        			  let c = children[j];
        			  let cName = c.getAttribute("name");
        			  if (cName == null) {
        				  continue;
        			  }
	        		  if (cName == 'div_principal_index') {
	        			  c.innerText = ((index+1) *10);
	        		  }
	        		  console.log(c);
        		  }
        		  /* var oDiv = elem.getElementByTagName("label_principal_body_index")[0];
        		  oDiv.innerText = ((index+1) *10); */
        	}
/*         	nods.forEach((elem, index) => {
      		  elem.id = 'div_principal_' + (index *10);
        	});
 */        	
/*         	let key;
        	for (key in nods) {
        	    key.id = 
        	}
 */        	/* var nods = $('[name="div_principal"]'); */
/*         	if (nods.length>0) {
        		idx = nods.length;
            	var str = getAddLsPrincipalId(idx);
            	var node = nods[nods.length - 1];
            	node.insertAdjacentHTML('afterend', str);
        	}
 */        }
        
        /* 用户管理-新增-选择部门树 */
        function addLsPrincipalId() {
        	var idx = 0;
        	/* var nods = document.getElementsByTagName('div_principal'); */
        	var nods = document.getElementsByName('div_principal');
        	/* var nods = $('[name="div_principal"]'); */
        	if (nods.length>0) {
        		idx = nods.length;
            	var str = getAddLsPrincipalId(idx);
            	var node = nods[nods.length - 1];
            	node.insertAdjacentHTML('afterend', str);
        	} else {
        		idx = 0;
            	var str = getAddLsPrincipalId(idx);
            	/* var node = $('#div_principal_body'); */
            	var node = document.getElementById('div_principal_body');
            	node.insertAdjacentHTML('afterend', str);
        	}
        }
        
        /* 用户管理-新增-选择部门树 */
        function addLsPrincipalId_empty() {
        	var idx = 0;
           	var str = getAddLsPrincipalId(idx);
        	/* var node = $('#div_principal_body'); */
        	var node = document.getElementById('div_principal_body');
           	node.insertAdjacentHTML('afterend', str);
        }

        /* 用户管理-新增-选择部门树 */
        function addLsPrincipalId1() {
        	var idx = 0;
        	/* var nods = $('#div_list_principal'); */
        	/* var nods = document.getElementsByTagName('div_principal'); */
        	var nods = $('[name="div_principal"]');
        	idx = nods.length;
        	var str = getAddLsPrincipalId(idx);
        	// <div id="one">one</div> 
        	var node = nods[nods.length - 1];
        	/* document.getElementById('div_principal_'+(idx-1));  */
        	node.insertAdjacentHTML('afterend', str);

        	// 此时，新结构变成：
        	// <div id="one">one</div><div id="two">two</div>
        	
        	/* if(nods.length > 0) {
        	var lsPrincipalId_n = "lsPrincipalId_" + idx;
        	var x = document.getElementById(lsPrincipalId_n);
        	//如果对象x不为空
        	if (x != null) {
        	    x.remove();
        	} */
        }
        	
        function getAddLsPrincipalId(index) {
        	let tr = `
        	  <div name="div_principal" id="div_principal_${index}">
                <label class="col-sm-3 control-label is-required">委托方: ${index+1}</label>
                <div class="col-sm-8">
                  <div class="input-group">
						<div class="input-group">
      						<input type="hidden" name="principal[${index}].caseCustIndex" id="caseCustIndex_${index}"/>
          					<input type="hidden" name="principal[${index}].custId" id="custId_${index}"/>
          					<input type="hidden" name="principal[${index}].custName" id="custName_${index}"/>
              				<input type="hidden" name="principal[${index}].certNo" id="certNo_${index}"/>
                  			<input type="hidden" name="principal[${index}].custType" id="custType_${index}"/>
						</div>
                    	<input name="custSelect" id="custSelect_${index}" type="text" placeholder="请选择客户" class="form-control" 
                    	  readonly>
                    	<span class="input-group-addon" onclick="selectUserInfo(${index})"><i class="fa fa-search"></i></span>
                    	<span class="input-group-addon" onclick="deleteLsPrincipalId(${index})"><i class="fa fa-minus"></i></span>
                  </div>
                </div>
                </span>
                </span>
               </div>
        	    ;`
        			
        	return tr;
        }
        
		function doSubmitUserInfo(index, layero){
			var body = $.modal.getChildFrame(index);
			let cur_idx = $("#principal_cur_idx").val();
			var custId_n = "#custId_" + cur_idx;
			var custName_n = "#custName_" + cur_idx;
			var certNo_n = "#certNo_" + cur_idx;
			var custType_n = "#custType_" + cur_idx;
			var custSelect_n = "#custSelect_" + cur_idx;
   			$(custId_n).val(body.find('#custId').val());
   			$(custName_n).val(body.find('#custName').val());
   			$(custType_n).val(body.find('#custType').val());
   			$(certNo_n).val(body.find('#certNo').val());
   			/* $("#custSelect").val($("#custId").val() + '-' + $("#custName").val() + '-' + $("#certNo").val()); */
   			$(custSelect_n).val(body.find('#custName').val() + '-' + body.find('#certNo').val());
   			$.modal.close(index);
		}
        
		function doSubmitUserInfo2(index, layero){
			var body = $.modal.getChildFrame(index);
			var cur_idx = $("#principal_cur_idx2").val();
			/* set val */
			var custId_n = $.common.sprintf('#principal[%s].custId', cur_idx);
			var custName_n = $.common.sprintf('#principal[%s].custName', cur_idx);
			var certNo_n = $.common.sprintf('#principal[%s].certNo', cur_idx);
			var custType_n = $.common.sprintf('#principal[%s].custType', cur_idx);
			
			let custId = body.find('#custId').val();
			let custName = body.find('#custName').val();
			let certNo = body.find('#certNo').val();
			let custType = body.find('#custType').val();
			
   			$(custId_n).val(custId);
   			$(custName_n).val(custName);
   			$(certNo_n).val(certNo);
   			$(custType_n).val(custType);

			var custSelect_n = $.common.sprintf('#custSelect_%s', cur_idx);
			var cs_val = $.common.sprintf('(%s-%s-%s-%s)', custId, custName, certNo, custType);
			/* var cs_val = $.common.sprintf('(%s-%s-%s)', body.find('#custId').val(), body.find('#custName').val(), body.find('#certNo').val()); */
			$(custSelect_n).val(cs_val);
   			/* $("#custSelect").val($("#custId").val() + '-' + $("#custName").val() + '-' + $("#certNo").val());
   			$(custSelect_n).val(body.find('#custName').val() + '-' + body.find('#certNo').val()); */
   			$.modal.close(index);
		}
		
        // 直接返回获取
   		var ctData = [[${ctData}]];
    	$('#element_ct').cxSelect({
    	  selects: ['type', 'router'],
    	  jsonValue: 'v',
    	  data: ctData
    	});
    </script>
    
</body>
</html>